<template>
  <view class="goods-detail-info">
    <view class="goods-detail" v-if="detail">
      <!-- 轮播图 -->
      <u-swiper
        class="swiper"
        mode="dot"
        :list="detail.pics"
        name="pics_big"
        height="497"
        img-mode="aspectFit"
        bg-color="#fff0"
        @click="handle"
      ></u-swiper>
      <!-- 价格 -->
      <view class="goods-price">
        <view class="price">￥</view>{{ detail.goods_price }}
      </view>
      <!--名称 -->
      <view class="goods-name u-line-2">{{ detail.goods_name }}</view>
    </view>
    <!-- 图片详情 -->
    <view class="goods_introduce">
      <view class="goods_introduce-title">图文详情</view>
      <view class="goods_introduce-content">
        <!-- v-html -->
        <!-- <view v-html="detail.goods_introduce"></view> -->
        <!-- rich-text -->
        <!-- <rich-text :nodes="detail.goods_introduce"></rich-text> -->
        <u-parse :html="detail.goods_introduce"></u-parse>
      </view>
    </view>
    <!-- 提交订单栏 -->
    <submitBar class="submitBar" :goodsInfo="detail"></submitBar>
  </view>
</template>
 
<script>
export default {
  data() {
    return {
      //商品详情数据
      detail: null,
    };
  },
  onLoad({ goods_id }) {
    goods_id = goods_id || 9832;
    this.getGoodsDetail(goods_id);
  },
  methods: {
    async getGoodsDetail(goods_id) {
      this.detail = await this.$u.http.get("/goods/detail", { goods_id });
    },
    handle(index) {
      const urls = this.detail.pics.map((pic) => pic.pics_big);
      uni.previewImage({ urls, current: urls[index] });
    },
  },
};
</script>

<style lang="scss">
.goods-detail-info {
  margin-bottom: 94rpx;
}
.goods-detail {
  height: 717rpx;
  margin-bottom: 36rpx;
  .goods-price {
    margin: 18rpx 34rpx;
    line-height: 50rpx;
    color: $theme-color;
    font-size: 36rpx;
    .price {
      font-size: 24rpx;
      display: inline-block;
      font-weight: 700;
    }
  }
  .goods-name {
    margin: 0 34rpx 48rpx;
    line-height: 42rpx;
    font-size: 30rpx;
    color: #434343;
  }
}
.goods_introduce-title {
  color: #434343;
  font-size: 28rpx;
  text-align: center;
}
.goods_introduce-content {
  margin: 0 16rpx;
}
.submitBar {
  position: fixed;
  bottom: 0;
  width: 100%;
}
</style> 